<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="zhangHaoFormQueryRef" :model="zhangHaoFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!zhangHaoFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="zhangHaoFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="zhangHaoFormQuerySubmitting" @search="zhangHaoFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="zhangHaoFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="zhangHaoFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="zhangHaoFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="zhangHaoFormQuerySubmitting" @search="zhangHaoFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
          </a-col>
          <a-col :span="8">
            <a-form-item label="账号">
              <a-input v-model:value="zhangHaoFormQueryModel.accountAndLike" placeholder="输入账号" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="密码">
              <a-input v-model:value="zhangHaoFormQueryModel.passwordAndLike" placeholder="输入密码" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="排序权重">
              <a-input-number v-model:value="zhangHaoFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="zhangHaoFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="zhangHaoFormQuerySubmitting" @click="zhangHaoFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="zhangHaoFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="zhangHaoAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="zhangHaoUpdate" v-if="zhangHaoListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="zhangHaoDelete" v-if="zhangHaoListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="zhangHaoDetailInfo" v-if="zhangHaoListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="zhangHaoListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="zhangHaoListColumns"
        :data-source="zhangHaoListDataSet"
        :loading="zhangHaoListLoading"
        :pagination="false"
        bordered
        :customRow="zhangHaoListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: zhangHaoListSelectedRowKeys, onChange: zhangHaoListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
      </a-table>
      <a-pagination
        v-model:current="zhangHaoListDataPage"
        v-model:pageSize="zhangHaoListDataRows"
        :total="zhangHaoListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="zhangHaoListPaginationChange"
        @showSizeChange="zhangHaoListPaginationShowSizeChange"
        v-if="zhangHaoListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!zhangHaoListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(zhangHaoListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="zhangHaoEditDrawerVisible"
      title="编辑账号信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="zhangHaoEditDrawerOnClose"
    >
      <a-form ref="zhangHaoFormRef" :model="zhangHaoFormModel" :rules="zhangHaoFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="账号" name="account">
              <a-input v-model:value="zhangHaoFormModel.account" placeholder="输入账号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码" name="password">
              <a-input v-model:value="zhangHaoFormModel.password" placeholder="输入密码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="zhangHaoFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="zhangHaoFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="zhangHaoFormSaveSubmitting" @click="zhangHaoFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="zhangHaoFormSaveSubmitting" @click="zhangHaoFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="zhangHaoDetailDrawerVisible"
      title="账号详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="账号" :span="1">{{ zhangHaoDetailModel.account }}</a-descriptions-item>
          <a-descriptions-item label="密码" :span="1">{{ zhangHaoDetailModel.password }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="1">{{ zhangHaoDetailModel.weightOrder }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="zhangHaoDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useZhangHaoStore } from '/@/store/modules/cn/core/cs/zhangHaoStore'

import type { ZhangHao } from '/@/model/cn/core/cs/eo/ZhangHao'
import { toZhangHao } from '/@/model/cn/core/cs/eo/ZhangHao'

import type { ZhangHaoQO } from '/@/model/cn/core/cs/qo/ZhangHaoQO'
import { toZhangHaoQO } from '/@/model/cn/core/cs/qo/ZhangHaoQO'

import type { ZhangHaoVO } from '/@/model/cn/core/cs/vo/ZhangHaoVO'
import { toZhangHaoVO } from '/@/model/cn/core/cs/vo/ZhangHaoVO'

@Options({
  name: 'ZhangHao',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useZhangHaoStore),
  },
})
export default class ZhangHao extends Vue {

  zhangHaoListDataSet: Array<ZhangHaoVO> = []

  zhangHaoListColumns: Array<object> = [
    {
      title: '账号',
      dataIndex: 'account',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '密码',
      dataIndex: 'password',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
  ]

  zhangHaoListLoading: boolean = false

  zhangHaoListSelectedRowKeys: string[] = []

  zhangHaoListSelectData: Array<ZhangHaoVO> = []

  zhangHaoListSelectLength: number = 0

  zhangHaoListSelectCurrentRowIndex: number = -1

  zhangHaoListSelectCurrentRowData: ZhangHaoVO = toZhangHaoVO()

  zhangHaoListPaginationVisible: boolean = true

  zhangHaoListDataPage: number = 1

  zhangHaoListDataRows: number = 10

  zhangHaoListDataCount: number = 0

  zhangHaoListRowOnChange(selectedRowKeys, selectedRows) {
    this.zhangHaoListSelectedRowKeys = [ ...selectedRowKeys ]
    this.zhangHaoListSelectData = [ ...selectedRows ]
    this.zhangHaoListSelectLength = selectedRows.length
  }

  zhangHaoListCustomRow(record, index) {
    return {
      'class': index === this.zhangHaoListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.zhangHaoListSelectCurrentRowIndex = index
        this.zhangHaoListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.zhangHaoListSelectedRowKeys ]
        let selectedRows = [ ...this.zhangHaoListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.zhangHaoListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.zhangHaoListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.zhangHaoStore.pkVo(this.$toParam<ZhangHaoQO>({ id: this.zhangHaoListSelectCurrentRowData.id } as ZhangHaoQO)).then((res: Res<ZhangHaoVO>) => {
          if (res.succ) {
            this.zhangHaoDetailModel = { ...res.data[0] }
            this.zhangHaoDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  zhangHaoListGetDataSet() {
    this.zhangHaoListLoading = true
    this.zhangHaoListRowOnChange([], [])
    this.zhangHaoListSelectCurrentRowIndex = -1
    this.zhangHaoListSelectCurrentRowData = toZhangHaoVO()
    this.zhangHaoStore.pagingVo(this.$toParam<ZhangHaoQO>([], this.zhangHaoListDataPage, this.zhangHaoListDataRows)).then((res: Res<ZhangHaoVO>) => {
      if (res.succ) {
        this.zhangHaoListPaginationVisible = true
        this.zhangHaoListDataSet = [ ...res.data ]
        this.zhangHaoListDataCount = res.count
        setTimeout(() => { this.zhangHaoListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.zhangHaoListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.zhangHaoListLoading = false }, 500)
    })
  }

  zhangHaoListPaginationChange() {
    this.zhangHaoListGetDataSet()
  }

  zhangHaoListPaginationShowSizeChange() {
    this.zhangHaoListGetDataSet()
  }

  zhangHaoFormQueryVisible: boolean = false

  zhangHaoFormQuerySubmitting: boolean = false

  zhangHaoFormQueryModel: ZhangHaoQO = toZhangHaoQO()

  zhangHaoFormQueryUpDown() {
    this.zhangHaoFormQueryVisible = !this.zhangHaoFormQueryVisible
  }

  zhangHaoFormQueryReset() {
    if (this.$refs.zhangHaoFormQueryRef) {
      this.$refs.zhangHaoFormQueryRef.resetFields()
      this.zhangHaoFormQueryModel = toZhangHaoQO()
    }
  }

  zhangHaoFormQuerySearch() {
    this.zhangHaoFormQuerySubmitting = true
    this.zhangHaoListLoading = true
    this.zhangHaoListRowOnChange([], [])
    this.zhangHaoListSelectCurrentRowIndex = -1
    this.zhangHaoListSelectCurrentRowData = toZhangHaoVO()
    this.zhangHaoStore.queryVo(this.$toParam<ZhangHaoQO>(this.$toSearch({ ...this.zhangHaoFormQueryModel }))).then((res: Res<ZhangHaoVO>) => {
      if (res.succ) {
        this.zhangHaoListPaginationVisible = false
        this.zhangHaoListDataSet = [ ...res.data ]
        this.zhangHaoListDataCount = res.count
        setTimeout(() => { this.zhangHaoFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.zhangHaoListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.zhangHaoFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.zhangHaoListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.zhangHaoFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.zhangHaoListLoading = false }, 500)
    })
  }

  zhangHaoEditDrawerVisible: boolean = false

  zhangHaoFormSaveSubmitting: boolean = false

  zhangHaoFormSaveContinue: boolean = false

  zhangHaoFormModel: ZhangHao = toZhangHao()

  zhangHaoFormRules: object = {
    // account: [
    //   { type: 'string', required: true, message: '账号不能为空！', trigger: ['change', 'blur'] },
    // ],
    // password: [
    //   { type: 'string', required: true, message: '密码不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  zhangHaoFormReset() {
    if (this.$refs.zhangHaoFormRef) {
      this.$refs.zhangHaoFormRef.resetFields()
      this.zhangHaoFormModel = toZhangHao()
    }
  }

  zhangHaoFormSubmit() {
    this.zhangHaoFormSaveSubmitting = true
    this.$refs.zhangHaoFormRef.validate().then(() => {
      if (this.zhangHaoFormModel.id) {
        this.zhangHaoStore.update(this.$toParam<ZhangHao>(this.zhangHaoFormModel)).then((res: Res<ZhangHao>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.zhangHaoFormReset()
            this.zhangHaoFormSaveSubmitting = false
            if (!this.zhangHaoFormSaveContinue) {
              this.zhangHaoEditDrawerVisible = false
              this.zhangHaoListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.zhangHaoFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.zhangHaoFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.zhangHaoStore.save(this.$toParam<ZhangHao>(this.zhangHaoFormModel)).then((res: Res<ZhangHao>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.zhangHaoFormReset()
            this.zhangHaoFormSaveSubmitting = false
            if (!this.zhangHaoFormSaveContinue) {
              this.zhangHaoEditDrawerVisible = false
              this.zhangHaoListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.zhangHaoFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.zhangHaoFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.zhangHaoFormSaveSubmitting = false }, 3000)
    })
  }

  zhangHaoFormSave() {
    this.zhangHaoFormSaveContinue = false
    this.zhangHaoFormSubmit()
  }

  zhangHaoFormNextAdd() {
    this.zhangHaoFormSaveContinue = true
    this.zhangHaoFormSubmit()
  }

  zhangHaoAdd() {
    if (this.zhangHaoFormModel.id) {
      this.zhangHaoFormReset()
    }
    this.zhangHaoEditDrawerVisible = true
  }

  zhangHaoUpdate() {
    this.zhangHaoStore.pk(this.$toParam<ZhangHaoQO>({ id: this.zhangHaoListSelectData[0].id } as ZhangHaoQO)).then((res: Res<ZhangHao>) => {
      if (res.succ) {
        this.zhangHaoFormReset()
        this.zhangHaoFormModel = { ...res.data[0] }
        this.zhangHaoEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  zhangHaoEditDrawerOnClose() {
    if (this.zhangHaoFormSaveContinue) {
      this.zhangHaoFormSaveContinue = false
      this.zhangHaoListGetDataSet()
    }
  }

  zhangHaoDelete() {
    let param: Array<ZhangHao> = []
    this.zhangHaoListSelectData.forEach((eo: ZhangHaoVO) => {
      param.push({ id: eo.id } as ZhangHao)
    })
    this.zhangHaoStore.removeBatch(this.$toParam<ZhangHao>(param)).then((res: Res<ZhangHao>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.zhangHaoListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  zhangHaoDetailDrawerVisible: boolean = false

  zhangHaoDetailModel: ZhangHaoVO = toZhangHaoVO()

  zhangHaoDetailInfo() {
    this.zhangHaoStore.pkVo(this.$toParam<ZhangHaoQO>({ id: this.zhangHaoListSelectData[0].id } as ZhangHaoQO)).then((res: Res<ZhangHaoVO>) => {
      if (res.succ) {
        this.zhangHaoDetailModel = { ...res.data[0] }
        this.zhangHaoDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  zhangHaoDetailUpdate() {
    this.zhangHaoStore.pk(this.$toParam<ZhangHaoQO>({ id: this.zhangHaoDetailModel.id } as ZhangHaoQO)).then((res: Res<ZhangHao>) => {
      if (res.succ) {
        this.zhangHaoFormReset()
        this.zhangHaoFormModel = { ...res.data[0] }
        this.zhangHaoDetailDrawerVisible = false
        this.zhangHaoEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.zhangHaoListGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
